<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <img src="@/assets/logo2.png" alt="">
          <!-- 菜单开始 -->

           <el-menu :default-openeds="['1']">
               <!-- 次级菜单 -->

          <el-menu-item index="6">
          <el-icon><Odometer /></el-icon>
          仪表盘
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Menu /></el-icon>常用设置
            </template>
            <!-- 次级菜单的菜单项 -->
            <el-menu-item-group>
              <el-menu-item index="1-1">教师管理</el-menu-item>
              <el-menu-item index="1-2">学生管理</el-menu-item>
              <el-menu-item index="1-3">公告管理</el-menu-item>
              <el-menu-item index="1-4">系统配置</el-menu-item>
              <el-menu-item index="1-5">判断服务器</el-menu-item>
            </el-menu-item-group>    

          </el-sub-menu>


            <el-sub-menu index="2">
            <template #title>
              <el-icon><Aim /></el-icon>问题
            </template>
            <!-- 次级菜单的菜单项 -->
            <el-menu-item-group>
              <el-menu-item index="2-1">问题列表</el-menu-item>
              <el-menu-item index="2-2">增加题目</el-menu-item>
              <el-menu-item index="2-3">导入导出题目</el-menu-item>
            </el-menu-item-group>    
          </el-sub-menu>


          <el-sub-menu index="3">
            <template #title>
              <el-icon><Trophy /></el-icon>比赛&练习
            </template>
            <!-- 次级菜单的菜单项 -->
            <el-menu-item-group>
              <el-menu-item index="3-1">比赛列表</el-menu-item>
              <el-menu-item index="3-2">创建比赛</el-menu-item>
            </el-menu-item-group>    
          </el-sub-menu>

          <el-sub-menu index="4">
            <template #title>
              <el-icon><Collection /></el-icon>课程
            </template>
            <!-- 次级菜单的菜单项 -->
            <el-menu-item-group>
              <el-menu-item index="4-1">课程列表</el-menu-item>
              <el-menu-item index="4-2">创建课程</el-menu-item>
            </el-menu-item-group>    
          </el-sub-menu>

        </el-menu>
      </el-aside>
      <el-container>
        <el-header><h3>第一个使用布局的页面</h3></el-header>
        <el-main>
            <FirstHello />
        </el-main>
        <el-footer>web前端开发实战课程版权所有
            <el-button circle type="info" @click="open">
                <el-icon><InfoFilled /></el-icon>
            </el-button>

        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>


<script>

import {InfoFilled,Odometer,Aim,Collection,Menu,Trophy} from '@element-plus/icons-vue'
export default {
   components:{
     
     InfoFilled,
     Odometer,
     Aim,
     Collection,
     Menu,
     Trophy,
    
 },
 
}
</script>


<style>
.el-header, .el-footer {
    background-color:#b3c0d1;
    color:var(--e-text-color-primary);
    text-align: center;
    line-height:20px;
}
.el-footer{
    line-height: 60px;
}
.el-aside{
    background-color:white;
    text-align:center;
    line-height:200px
}
.el-main{
    background-color:#e9eef3;
    text-align:center
}

</style>